<template>
  <div class="question-container">
    <answer
      :section-number="examStore.currQuestion?.sectionIndex + 1"
      :total-sections="examStore.examInfo?.section?.length"
      :question-number="examStore.currQuestion?.index + 1"
      :total-questions="
        examStore.examInfo?.section?.[examStore.currQuestion?.sectionIndex]?.question
          ?.length
      "
      :difficulty="examStore.currQuestion?.grade"
      difficulty-text="hard"
      :correct-percentage="examStore.currQuestion?.correct"
      :wrong-percentage="examStore.currQuestion?.error"
      :correct-time="formatSeconds(examStore.currQuestion?.correct_time)"
      :wrong-time="formatSeconds(examStore.currQuestion?.error_time)"
      :average-time="formatSeconds(examStore.currQuestion?.time)"
      :current-time="timeStart(timerStore.paperTime)"
    />

    <!-- 题目内容区域 -->
    <div class="question-content">
      <!-- 题目内容 -->
      <QuestionTypeLibray></QuestionTypeLibray>
    </div>
    <QuestionCard
      :hasPrevious="
        examStore.currQuestion?.sectionIndex == 0 && examStore.currQuestion?.index == 0
      "
      :hasNext="
        examStore.currQuestion?.sectionIndex == sectionLeng - 1 &&
        examStore.currQuestion?.index == questionLeng - 1
      "
    />
  </div>
</template>
<script setup>
import { computed } from "vue";
import answer from "./answer.vue";
import QuestionCard from "../question/questionCard.vue";
import QuestionTypeLibray from "~/components/QuestionTypeLibrary/index.vue";
import { formatSeconds, timeStart } from "@/utils/index";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();
import { useTimer } from "@/stores/timer.js";
const timerStore = useTimer();

const sectionLeng = computed(() => examStore.examInfo.section.length);
const questionLeng = computed(
  () =>
    examStore.examInfo?.section?.[examStore.currQuestion?.sectionIndex]?.question?.length
);
</script>

<style lang="scss" scoped>
.question-container {
  margin: 20px auto;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.question-content {
  min-height: 300px;
  // margin: 20px 0;
}
</style>
